<template>
	<view class="ImageMagicCube" >

		<view class="Style01" v-if="imgList.length == 1">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :imageStyle="jisuan(res.image)" :isPreview="isPreview" :noclick="noclick"
						:msgindex="msgindex" :zuindex="index"></cl-chat-image>
					<view class="videoView" v-else-if="iosAndMov(res.video.url)" @click="previewVideo(res.video.url)" :style="jisuan(res.video)">
						<cl-chat-image :srckey="res.video.thumb_url" :imageStyle="jisuan(res.video)"
							:noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view @click="previewVideo(res.video.url)" v-else style="position: relative;">
						<cl-chat-video :srckey="res.video.url" :videoStyle="jisuan(res.video)"></cl-chat-video>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style02" v-if="imgList.length == 2" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" 
						:isPreview="isPreview" :noclick="noclick" :msgindex="msgindex" :zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url"  :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style03" v-if="imgList.length == 3" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style04" v-if="imgList.length == 4" :style="{width:width + 'rpx'}" style="position: relative;">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)'>
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style05" v-if="imgList.length == 5" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style06" v-if="imgList.length == 6" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style07" v-if="imgList.length == 7" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style08" v-if="imgList.length == 8" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="Style09" v-if="imgList.length == 9" :style="{width:width + 'rpx'}">
			<view class="ImgDiv">
				<view v-for="(res,index) in imgList" :key="index" @click='toNavigate(res)' style="position: relative;">
					<cl-chat-image :srckey="res.image.url" v-if="res.image" :isPreview="isPreview" :noclick="noclick" :msgindex="msgindex"
						:zuindex="index"></cl-chat-image>
					<view class="videoView" v-else @click="previewVideo(res.video.url)">
						<cl-chat-image :srckey="res.video.thumb_url" :noclick="true"></cl-chat-image>
						<image src="@/static/play.png" mode="" class="playimg"></image>
					</view>
					<view class="jindu" v-if="getJindu(index) !== false">
						<text v-if="getJindu(index) == -1" style="color: #9e0000;">fail</text>
						<text v-else>{{getJindu(index)}}%</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			imgList: {
				type: Array,
				default () {
					return []
				}
			},
			width: {
				type: String | Number,
				default: 480
			},
			msgindex: {
				type: String | Number,
				default: '0'
			},
			isChat: {
			  type: Boolean,
			  default:false
			},
			maxWidth:{
				type: String | Number,
				default: 480
			},
			maxHeight:{
				type: String | Number,
				default: 1000
			},
			noclick: {
			  type: Boolean,
			  default:false
			},
			noclickVideo:{
			  type: Boolean,
			  default:false
			},
			isPreview:{
				type: Boolean,
				default: true
			},
			localId:{
				type: String,
				default: ''
			}
		},
		computed: {
			...mapState({
				uploads: state => state.uploadProgress.uploads,
			}),
			iosAndMov(){
				return (url)=>{
					//禁止安卓MOV格式直接播放
					if((uni.$u.os() == 'android' && this.isMovFile(url)) || !this.isChat){
						return true
					}
					return false
				}
			},
			jisuan() {
				return (image) => {
				
					const {
						width,
						height
					} = image;
					const originalWidth = width
					const originalHeight = height
					const maxWidth = this.maxWidth
					const maxHeight = this.maxHeight
					const minWidth = 120
					const minHeight = 120

					// 初始宽高等于原始宽高
					let displayWidth = originalWidth;
					let displayHeight = originalHeight;

					// 如果宽度超过最大宽度，按最大宽度计算高度
					if (displayWidth > maxWidth) {
						displayWidth = maxWidth;
						displayHeight = (maxWidth / originalWidth) * originalHeight;
					}

					// 如果计算出的高度小于最小高度，则高度设置为最小高度，宽度保持最大宽度
					if (displayHeight < minHeight) {
						displayHeight = minHeight;
					}

					// 如果高度超过最大高度，按最大高度计算宽度
					if (displayHeight > maxHeight) {
						displayHeight = maxHeight;
						displayWidth = (maxHeight / originalHeight) * originalWidth;
					}

					// 如果计算出的宽度小于最小宽度，则宽度设置为最小宽度，高度保持最大高度
					if (displayWidth < minWidth) {
						displayWidth = minWidth;
					}
					return {
						width: displayWidth + 'rpx',
						height: displayHeight + 'rpx'
					}
				}
			},
			getJindu(){
				return (index)=>{
					if(!this.localId)return false
					if(this.uploads[this.localId] && this.uploads[this.localId].hasOwnProperty(index)){
						if(this.uploads[this.localId][index] == -1){
							return -1
						}
						return Math.floor((this.uploads[this.localId][index] * 100))
					}
					return false
				}
			}
		},
		data() {
			return {
				mediaUrls: [], // 存储所有图片URL
			};
		},
		mounted() {
			// this.mediaUrls = this.imgList.filter(item => item.image).map(item => item.image.url);
			this.mediaUrls = this.imgList.flatMap(item => {
				if (item.image) {
					return [item.image.url];
				} else if (item.video) {
					return [item.video.url];
				}
				return []; // 如果既没有image也没有video，返回空数组
			});
		},
		methods: {
			isMovFile(filePath) {
			  // 提取文件名（去除查询字符串或哈希）
			  const fileName = filePath.split('?')[0].split('#')[0];
			  // 获取文件扩展名
			  const extname = fileName.split('.').pop().toLowerCase();
			  // 检查文件扩展名是否为 .mov
			  return extname === 'mov';
			},
			toNavigate(e) {
				let id = e
				this.$emit('toNavigate', id)
			},
			previewVideo(url) {
				if(this.noclickVideo)return
				this.$Router.push({
					name: 'video',
					params: {
						video: url
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ImageMagicCube image {
		border-radius: 8rpx;
		display: block;
	}
	
	
	.jindu{
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		font-size: 20rpx;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		border-radius: 20rpx;
		padding: 2rpx 15rpx;
	}


	/* 样式1 */
	.Style01 .ImgDiv {
		width: 100%;
		overflow: hidden;
	}

	.Style01 .ImgDiv>view {
		width: 100%;

		.videoView {
			position: relative;
			width: 100%;

			.playimg {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -50rpx;
				/* 元素高度的一半 */
				margin-left: -50rpx;
				/* 元素宽度的一半 */
			}
		}
	}


	/* 样式2 */
	.Style02 .ImgDiv {
		width: 100%; /* 宽度占据父元素的100% */
		overflow: hidden; /* 超出部分隐藏 */
		display: grid; /* 使用网格布局 */
		grid-template-columns: repeat(2, 1fr); /* 创建6列，宽度均分 */
		grid-gap: 10rpx; /* 行列之间的间隔为6rpx */
		aspect-ratio: 6 / 6; /* 例如 6:5 的比例，按需修改 */
	}

	.Style02 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;
			

			.playimg {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -40rpx;
				/* 元素高度的一半 */
				margin-left: -40rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	/* 样式3 */
	.Style03 .ImgDiv {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		aspect-ratio: 6 / 6; /* 例如 6:5 的比例，按需修改 */
		grid-gap: 6rpx;
	}

	.Style03 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}

	}

	.Style03 .ImgDiv>view:nth-of-type(1) {
		grid-column: span 1;
		grid-row: span 2;

		.videoView {
			.playimg {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -40rpx;
				/* 元素高度的一半 */
				margin-left: -40rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	/* 样式4 */
	.Style04 .ImgDiv {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		// grid-template-rows: repeat(3, 250rpx);
		aspect-ratio: 6 / 8; /* 例如 6:5 的比例，按需修改 */
		grid-gap: 6rpx;
	}

	.Style04 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	.Style04 .ImgDiv>view:nth-of-type(1) {
		grid-column: span 2;
		grid-row: span 3;

		.videoView {
			.playimg {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -40rpx;
				/* 元素高度的一半 */
				margin-left: -40rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	/* 样式5 */
	.Style05 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		// grid-template-rows: repeat(2, 250rpx);
		aspect-ratio: 6 / 7; /* 例如 6:5 的比例，按需修改 */
		grid-gap: 6rpx;
	}

	.Style05 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;
		grid-column: span 2;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}

	}

	.Style05 .ImgDiv>view:nth-of-type(1) {
		grid-column: span 3;
	}

	.Style05 .ImgDiv>view:nth-of-type(2) {
		grid-column: span 3;
	}


	/* 样式6 */
	.Style06 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 6rpx;
		aspect-ratio: 6 / 6; /* 例如 6:5 的比例，按需修改 */
	}

	.Style06 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	/* 样式7 */
	.Style07 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		// grid-template-rows: repeat(3, 250rpx);
		grid-gap: 6rpx;
		
		aspect-ratio: 6 / 9; /* 例如 6:5 的比例，按需修改 */
	}

	.Style07 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;
		grid-column: span 2;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	.Style07 .ImgDiv>view:nth-of-type(1),
	.Style07 .ImgDiv>view:nth-of-type(2),
	.Style07 .ImgDiv>view:nth-of-type(3),
	.Style07 .ImgDiv>view:nth-of-type(4) {
		grid-column: span 3;
	}

	/* 样式8 */
	.Style08 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		// grid-template-rows: repeat(3, 250rpx);
		grid-gap: 6rpx;
		aspect-ratio: 6 / 9; /* 例如 6:5 的比例，按需修改 */
	}

	.Style08 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;
		grid-column: span 2;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}
	}

	.Style08 .ImgDiv>view:nth-of-type(1) {
		grid-column: span 3;
	}

	.Style08 .ImgDiv>view:nth-of-type(2) {
		grid-column: span 3;
	}


	/* 样式9 */
	.Style09 .ImgDiv {
		width: 100%;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		// grid-template-rows: repeat(3, 250rpx);
		aspect-ratio: 6 / 9; /* 例如 6:5 的比例，按需修改 */
		grid-gap: 6rpx;
	}

	.Style09 .ImgDiv>view {
		overflow: hidden;
		width: 100%;
		height: 100%;

		.videoView {
			position: relative;
			width: 100%;
			height: 100%;

			.playimg {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -30rpx;
				/* 元素高度的一半 */
				margin-left: -30rpx;
				/* 元素宽度的一半 */
			}
		}
	}
</style>